<template>
  <div class="order">
    <div class="headerhh">
      <div @click="fontStep" style="float: left">
        <a-icon type="left" class="icon" />
        <a class="h3">疼痛等级调查</a>
      </div>
    </div>
    <div class="contents">
      <div class="header">尊敬的患者您好，请选择疼痛程度以评估您的疼痛等级（<span>2</span>/2）：</div>
      <div class="bodys">
          <div class="painup">
            <div :class="{'fir':true,'active':selectIndex===index}" v-for='(item,index) in imgContent' :key="index" @click="itemSelect(index)">
              <img :src="item.img"/>
              <p :class="generateClassName(index)">{{item.content}}</p>
            </div>
          </div>
      </div>
      <div class="bodys">
          <div class="painup">
            <div :class="{'fir':true,'sec':true,'active':selectIndex===index+5}" v-for='(item,index) in imgSecContent' :key="index+5"  @click="itemSelect(index+5)">
              <img :src="item.img"/>
              <p :class="generateSecClassName(index)">{{item.content}}</p>
            </div>
          </div>
      </div>
      <div class="footer">
        <button @click="fontStep">上一步</button><button class="nextStep" @click="submit">提交</button>
      </div>
      <!--提示-->
      <div class="layder"
          v-if="showimg">
        <div class="lay-cont">
          <div class="stateimg">
            <img src="../../../static/images/indexone/state03.png" />
          </div>
          <p>请选择疼痛等级</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import urls from '../../common.js'
// import $ from 'jquery'
export default {
  name: 'index',
  data () {
    return {
      pa_id: this.$store.state.personinfo.pa_id, // pa_id
      data: [],
      showimg: false,
      showDown: false, // 下拉框
      showflag: false, // 弹出层选择时间
      downdata: [],
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      selectName: '请选择',
      imgContent: [{
        img: '../../../static/images/pain/one.png',
        content: '一级为轻微的疼痛，表现为蚊子叮咬的痛、护士输液时扎针的疼痛。'
      }, {
        img: '../../../static/images/pain/two.png',
        content: '二级就要稍微的痛，一般是如慢性肝炎，患者肝区隐隐作痛。'
      }, {
        img: '../../../static/images/pain/three.png',
        content: '三级就是稍微的阵痛，如打脊柱麻醉时的疼痛的感觉。'
      }, {
        img: '../../../static/images/pain/four.png',
        content: '四级的疼痛是如被人打耳光的疼痛或者是被开水烫伤的痛，此时的痛很难让人入睡。'
      }, {
        img: '../../../static/images/pain/five.png',
        content: '五级的疼痛是持续的痛，如吃坏东西导致人体的肠胃炎，或是头严重的撞到了门框上面，这些都会让患者有呻吟的症状。'
      }],
      imgSecContent: [{
        img: '../../../static/images/pain/six.png',
        content: '六级的疼痛很痛，犹如被棒球棍打出流血、骨折、患者会大喊大叫的症状。'
      }, {
        img: '../../../static/images/pain/seven.png',
        content: '七级疼痛是非常的痛，如产妇在顺产时的疼痛，也犹如二度烧伤或是大面积流血性外伤，这个等级的患者就会无法入睡。'
      }, {
        img: '../../../static/images/pain/eight.png',
        content: '八级为剧痛就如清朝十大酷刑，犹如剪掉指头的疼痛，此等级的疼痛会让人体的血压和心跳急剧上升。'
      }, {
        img: '../../../static/images/pain/nine.png',
        content: '九级就是爆痛，是神经痛、阑尾炎痛，这就会导致晕厥的症状。'
      }, {
        img: '../../../static/images/pain/ten.png',
        content: '十级是严重的疼痛，就如人体在没有打麻药的情况下进行剖腹产的外科手术，这种疼痛会导致人体的休克。'
      }],
      selectIndex: '',
      painLevel: ''
    }
  },
  mounted () {
    document.addEventListener('click', e => { // 除了id为select的点击，下拉框都隐藏
      if (e.target.id !== 'select') {
        this.showDown = false
      }
    })
  },
  methods: {
    fontStep () {
      this.$router.push('/painSurvey')
    },
    submit () {
      if (this.painLevel) {
        this.$http
          .get(urls.updateLevelByPaidAndInTime + '?level=' + this.painLevel +
             '&pain_area=' + this.$route.params.painPart +
             '&pain_nature=' + this.$route.params.painQuality +
             '&paId=' + this.$store.state.personinfo.pa_id +
             '&inTime=' + this.$store.state.personinfo.in_time)
          .then(result => {
            if (result.body.code === '200') {
              this.$router.push('/painResult')
            }
          })
      } else {
        this.showimg = true
        setTimeout(() => {
          this.showimg = false
        }, 2000)
      }
    },
    itemSelect (index) {
      this.selectIndex = index
      const num = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']

      this.painLevel = num[index] + '级疼痛'
    },
    generateClassName (index) {
      return `tips tipsFir tips-${index}`
    },
    generateSecClassName (index) {
      return `tips tipsSec tipsec-${index}`
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/color.styl';

.painup{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0.2rem 0.5rem;
  .fir{
    width: 2.8rem;
    height: 3.4rem;
    background: #c8faf4;
    border-radius: 0.2rem;
    text-align: center;
    padding-top: 0.5rem;
    font-size: 0.22rem;
    // border: 0.5px solid #fff;
    line-height: 0.24rem;
    img{
      max-height: 1.1rem;
    }
  }
  .sec{
    background: #53dbcb;
  }
  .tipsFir{
    color:#37c0b0;
  }
  .tipsSec{
    color:#fff;
  }
  .tips{
    text-indent: 2em;
    text-align: left;
    padding: 0 0.2rem;
    margin-top: 0.6rem;
  }
  .tips-1{
    margin-top: 0.8rem;
  }
  .tips-3,.tipsec-0,.tipsec-3{
    margin-top: 0.5rem;
  }
  .tipsec-1,.tipsec-2,.tipsec-4{
    margin-top: 0.3rem;
  }
  .tips-4{
    margin-top: 0.1rem;
  }
  .active{
    // border:0.5px solid red;
    box-shadow: 0 0 12px #ffa800;
    // box-sizing: content-box;
  }
}

.pain-part{
    border: 1px solid #27ae9e;
    height: 0.8rem;
    line-height: 0.8rem;
    width: 5rem;
    border-radius: 0.2rem;
    display: flex;
    padding: 0 0.2rem;
    .pain-left{
      color:#27ae9e;
    }
    .pain-right{
      flex:1;
      text-align:right;
      color: gray;
    }
}
.pain-nature{
  margin-top:0.8rem;
}

.footer{
  text-align:right;
  padding-right:0.3rem;
  button{
    width: 1.5rem;
    height: 0.6rem;
    border-radius: 0.1rem;
    background: #fff;
    border: 1px solid #27ae9e;
    color:#27ae9e;
  }
  .nextStep{
    color:#fff;
    background:#27ae9e;
    margin-left: 0.2rem;
  }
}

.order{
  height:100%;
  background:#f7f8fa;
  display: flex;
  flex-flow: column;
  .contents{
    height: 100%;
    margin: 0.3rem;
    background:#fff;
    .header{
      font-size:0.24rem;
      margin: 0.6rem 0 0 0.3rem;
      span{
        color:#a3e1da;
      }
    }
    .bodys{
      display: flex;
      .left{
        width:7rem;
        text-align: right;
        img{
          height: 7rem;
          margin-top: 0.5rem;
        }
      }
      .right{
        flex:1;
        padding: 0.8rem 0 0 2.5rem;
      }
    }
    .left{
      // background-image url('../../../static/images/pain/body.png')
    }
  }
}

.headerhh {
  height: 0.98rem;
  background-color: $color-main;
  text-align: justify;
  line-height: 0.98rem;
  padding-left: 0.3rem;
  color: $color-white;
  // margin-bottom: 0.5rem;

  .icon {
    font-size: 0.36rem;
    color: $color-white;
    vertical-align: -0.07rem;
  }

  .h3 {
    display: inline-block;
    font-size: 0.36rem;
    color: $color-white;
  }
}

.layder
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  .lay-cont
    width 4rem
    height 2.3rem
    background-color rgba(0, 0, 0, 0.4)
    margin 4.8rem auto
    border-radius 0.3rem
    color #fff
    text-align center
    padding-top 0.4rem
    .stateimg
      width 0.78rem
      height 0.78rem
      margin 0 auto 0.4rem auto
      img
        width 100%
        height 100%
        display block
</style>
